<script setup lang="ts">
import {useCommonStore} from "@/store/common";
import {onMounted, onUnmounted, ref} from "vue";
import {reqCreateOrder, reqPayOrder} from "@/api/order";
import {reqGetDefaultAddress} from "@/api/user";
import {onLoad, onShow} from "@dcloudio/uni-app";


const commonStore = useCommonStore()
const goodList = ref([])
goodList.value = commonStore.goodsItem

const freight = ref(0)
freight.value = Math.random() * 10

const totalPrice = ref(0)
totalPrice.value = goodList.value.reduce((prev, item) => {
  let itemPrice = item.price ? item.price : item.itemPrice
  return prev + itemPrice * item.count
}, 0)

const price = ref(0)
price.value = (Math.ceil((freight.value + totalPrice.value) * 100) / 100).toFixed(2)

const info = ref({
  goodsIds: '',
  address: '',
  payPrice: 0
})

const address = ref({})

onLoad(async () => {
  await reqGetDefaultAddress().then((res: any) => {
    if (res.code == 200) {
      address.value = res.data
      info.value.address = res.data.id
    }
  })
})

onShow(() => {
  if (commonStore.addressItem.id) {
    address.value = commonStore.addressItem
    info.value.address = commonStore.addressItem.id
    commonStore.addressItem = {}
  }
})

const show = ref(false)

const orderNo = ref('')

const submitOrder = async () => {
  if (info.value.address && !show.value) {
    info.value.goodsIds = goodList.value.map((item) => item.id + ':' + item.count).join(',')
    info.value.payPrice = price.value
    await reqCreateOrder(info.value).then((res: any) => {
      if (res.code == 200) {
        orderNo.value = res.orderId
        show.value = true
        commonStore.goodsItem = []
      }
    })
  } else {
    uni.showToast({
      title: '请选择地址',
      icon: 'none'
    })
  }
}

const play = async () => {
  await reqPayOrder({orderId: orderNo.value}).then((res: any) => {
    show.value = false
    if (res.code == 200) {
      uni.redirectTo({
        url: '/pages/user/order/orderSuccess/orderSuccess?orderNo=' + orderNo.value
      })
    } else {
      uni.showToast({
        title: '支付失败，请再次重试',
        icon: 'none'
      })
      uni.navigateBack()
    }
  })
}

const close = () => {

  uni.showToast({
    title: '订单已创建，请尽快支付',
    icon: 'none'
  })
  uni.navigateBack()
  show.value = false
}

const toAddress = () => {
  uni.navigateTo({
    url: '/pages/user/setting/address/address?isSelect=true'
  })
}

onUnmounted(() => {
  commonStore.addressItem = []
  commonStore.goodsItem = []
})

</script>

<template>
  <view class="bar"></view>

  <scroll-view>
    <view class="container">
      <view class="address" @click="toAddress">
        <view v-if="address.id" style="display: flex;flex-direction: column">
          <view class="name">
            <text>{{ address.name }}</text>
            <text style="margin-left: 30rpx">{{ address.phone }}</text>
          </view>
          <text class="address-info">
            {{ address.province + address.city + address.country + address.detail }}
          </text>
        </view>
        <view v-else class="address-empty">
          去创建收货地址
        </view>
        <u-icon name="arrow-right"/>
      </view>

      <view style="margin-top: 15rpx;border-radius: 20rpx">
        <goodsItem v-for="(item,index) in goodList" :item="item" :key="item.id"></goodsItem>
      </view>

      <view class="freight">
        <view class="freight-item">
          <text>商品金额</text>
          <text>￥{{ totalPrice }}</text>
        </view>
        <view class="freight-item">
          <text>运费</text>
          <text style="color: red">+￥{{ freight.toFixed(2) }}</text>
        </view>
      </view>

      <view class="bottom">
        <view class="bottom-item">
          <text>发票</text>
          <text class="bottom-center-item">不开发票</text>
          <u-icon name="arrow-right"/>
        </view>
        <view class="bottom-item">
          <text>优惠卷</text>
          <text class="bottom-center-item">无可用</text>
          <u-icon name="arrow-right"/>
        </view>
        <view class="bottom-item">
          <text>礼品卡</text>
          <text class="bottom-center-item">无可用</text>
          <u-icon name="arrow-right"/>
        </view>
        <view class="bottom-item">
          <text>礼品卡</text>
          <text class="bottom-center-item">无可用</text>
          <u-icon name="arrow-right"/>
        </view>
      </view>

      <view class="play">
        <view class="price">
          <text>实付：</text>
          <text style="font-size: 35rpx">￥{{ price }}</text>
        </view>
        <view class="play-btn" @click="submitOrder()">
          提交订单
        </view>
        <view></view>
      </view>

      <u-action-sheet round="30" :show="show" @close="close()">
        <view style="padding: 20rpx;position: relative">
          <view style="margin: 40rpx 0;">
            <text style="font-size: 40rpx;font-weight: 600">支付订单</text>
            <text style="position: absolute;right: 40rpx;top: 40rpx;font-size: 50rpx;font-weight: 600" @click="close()">
              ×
            </text>
          </view>
          <text style="color: #B0B0B0">书香阁</text>
          <view class="play-price">
            ￥{{price}}
          </view>
          <view style="height: 150rpx"></view>
          <view class="immediately-play-btn" @click="play()">
            立即支付
          </view>
        </view>
      </u-action-sheet>
    </view>
  </scroll-view>
</template>

<style scoped lang="scss">
.container {
  background: #e9e7e7;
  height: 100vh;
  padding: 15rpx;

  .immediately-play-btn {
    width: 80vw;
    margin: 20rpx;
    font-size: 30rpx;
    color: white;
    border-radius: 50rpx;
    line-height: 60rpx;
    bottom: 20rpx;
    background: #29AB65;
    padding: 15rpx 40rpx;
  }

  .play-price {
    width: 90vw;
    margin: 20rpx;
    font-size: 60rpx;
    font-weight: 600;
    color: black;

  }

  .bottom-item {
    display: flex;
    width: 90vw;
  }


  .play {
    display: flex;
    width: 90vw;
    margin: 20rpx;
    font-size: 30rpx;
    color: white;
    border-radius: 50rpx;
    position: fixed;
    line-height: 60rpx;
    bottom: 20rpx;

    .price {
      flex: 2;
      background: #515050;
      padding: 15rpx 40rpx;
      border-radius: 50rpx 0 0 50rpx;
    }

    .play-btn {
      flex: 1;
      background: red;
      text-align: center;
      padding: 15rpx;
      border-radius: 0 50rpx 50rpx 0;
    }

  }

  .address {
    padding: 20rpx;
    display: flex;
    border-radius: 15rpx;
    justify-content: space-between;
    background: white;

    .address-info {
      margin-top: 15rpx;
      width: 100%;
      word-wrap: break-word;
      white-space: normal;
    }

    .name {
      font-size: 30rpx;
      font-weight: 600;
    }

    .address-empty {
      font-size: 30rpx;
      font-weight: 600;
      flex: 1;
    }

  }

  .bottom {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    margin-top: 15rpx;
    background: white;
    padding: 20rpx;
    border-radius: 15rpx;
    line-height: 80rpx;

    .bottom-item {
      display: flex;
      justify-content: space-between;
    }

    .bottom-center-item {
      flex: 1;
      text-align: end;
      margin-right: 15rpx;
      font-weight: 600;
    }

  }

  .freight {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    margin-top: 15rpx;
    background: white;
    padding: 20rpx;
    border-radius: 15rpx;

    .freight-item {
      display: flex;
      justify-content: space-between;
      line-height: 60rpx;
    }

  }

}
</style>
